import React, {useEffect} from 'react';
import {Button, Form, Input, Modal, notification, Select} from 'antd';
import {formInputRules} from '@/utils/rules';
import {addOrUpdateCommandGroupContact,} from '@/services/emergency';
import {filterEmpty} from '@/utils/methods';
import {useRequest} from "ahooks";
import {ConcactTypeMap} from "@/enums/emergency/map";

const EditContact: React.FC<any> = ({planId, concactId, onSuccess, ...props}: any) => {
  const [form] = Form.useForm();
  const {
    run,
    loading
  } = useRequest((values) => {
    const params = filterEmpty({
      originValues: values,
      keepEmpty: true,
    });
    concactId && (params.id = concactId);
    planId && (params.planId = planId);
    params.title &&
    (params.titleName = ConcactTypeMap.getName(params.title));
    return addOrUpdateCommandGroupContact(params)
  }, {
    manual: true,
    onSuccess(res: any) {
      notification.success({
        message: `${concactId ? '修改' : '新增'}联系人成功！`,
      });
      onSuccess && onSuccess(res);
    }
  })
  useEffect(() => {
    if (props.visible) {
      const {info} = props;
      info &&
      form.setFieldsValue({
        name: info.name,
        depart: info.depart,
        title: info.title,
        mobile: info.mobile,
        telephone: info.telephone,
      });
    } else {
      form.resetFields();
    }
  }, [props.visible]);
  return (
    <Modal
      {...props}
      title={`${props.concactId ? '修改' : '新增'}联系人`}
      footer={[
        <Button key="cancel" onClick={props.onCancel}>
          关闭
        </Button>,
        <Button
          type="primary"
          key="submit"
          loading={loading}
          onClick={async () => {
            const value: any = await form.validateFields()
            run(value)
          }}
        >
          保存
        </Button>,
      ]}
    >
      <Form form={form} labelCol={{span: 6, offset: 0}}>
        <Form.Item
          name="name"
          label="联系人姓名"
          rules={[
            ...formInputRules,
            {
              required: true,
              message: '请填写联系人姓名',
            },
          ]}
        >
          <Input/>
        </Form.Item>
        <Form.Item
          name="depart"
          label="联系人单位"
          rules={[
            ...formInputRules,
            {
              required: true,
              message: '请填写联系人单位',
            },
          ]}
        >
          <Input/>
        </Form.Item>
        <Form.Item
          name="title"
          label="联系人职务"
          rules={[
            {
              required: true,
              message: '请选择联系人职务',
            },
          ]}
        >
          <Select options={ConcactTypeMap.toOption()}/>
        </Form.Item>
        <Form.Item
          name="mobile"
          label="联系人手机"
          rules={[
            ...formInputRules,
            {
              required: true,
              message: '请填写联系人手机',
            },
          ]}
        >
          <Input/>
        </Form.Item>
        <Form.Item
          name="telephone"
          label="办公室电话"
          rules={[...formInputRules]}
        >
          <Input/>
        </Form.Item>
      </Form>
    </Modal>
  );
}

export default EditContact;
